<template>
  <div>
    <el-button text @click="toggleDark">
      <el-icon size="20">
        <Sunny v-if="!isDark" />
        <Moon v-else />
      </el-icon>
    </el-button>
  </div>
</template>

<script setup lang="ts">
  import { Sunny, Moon } from '@element-plus/icons-vue'
  import { watch } from 'vue'
  import { settingStore } from '@/stores/modules/setting'
  import { toggleDark, isDark } from './index'
  const { setTheme } = settingStore()
  watch(isDark, (newData) => {
    setTheme(newData ? 'dark' : 'light')
  })
</script>

<style scoped lang="scss">
  :deep(.el-tooltip__trigger:focus-visible) {
    outline: none !important;
  }
</style>
